<template>
  <div class="app-msg-detail" v-loading="loading">
    <h4 class="title">
      <el-button type="text" icon="el-icon-back" @click="$router.go(-1)" />
      <span>
        通知详情
        <em>{{ data.noticeName }}</em>
      </span>
    </h4>
    <Form class="detail-form" ref="form" v-model="data" :config="config" isReadonly inline>
      <!-- 通知频次 -->
      <template #triggerFrequency="scoped">
        {{ scoped.triggerFrequency ? `每天一次，每天${scoped.triggerFrequencyTime}点检查` : '仅触发一次' }}
      </template>

      <!-- 通知时间 -->
      <template #notificationAfterTriggering="scoped">
        <span v-if="scoped.notificationAfterTriggering">触发后立即通知</span>
        <span v-else>触发后超过{{ scoped.timedNotificationAfterTriggeringTime }}分钟进行通知</span>
      </template>

      <template #notificationTemplates="scoped">
        <div class="msg-tamplates">
          <table class="tpl-table" v-for="item in scoped.notificationTemplates" :key="item.label">
            <tr>
              <td rowspan="2" class="label">
                {{ notification[item.notificationMethodType] }}
              </td>
              <td class="bg">{{ item.title }}</td>
            </tr>
            <tr>
              <td class="cont">{{ item.content }}</td>
            </tr>
          </table>
        </div>
      </template>
    </Form>
  </div>
</template>

<script>
import Form from '@/components/Form'
import { detailNotice } from '@/api/message'
import { notification_method_type } from '@/utils/dictOptions'
export default {
  name: 'MessageDetail',
  components: { Form },
  data: function () {
    return {
      loading: false,
      data: {},
      config: [
        {
          label: '消息等级：',
          prop: 'messageGrade',
          style: { width: '32%' },
          type: 'select',
          slotTitle: '通知设置',
          options: [],
          async: this.dictMessageGrade,
        },
        {
          label: '通知业务：',
          prop: 'noticeBusinessType',
          type: 'select',
          style: { width: '32%' },
          options: [],
          async: this.dictMessageBusiness,
        },
        {
          label: '通知名称：',
          prop: 'noticeName',
          type: 'input',
          style: { width: '32%' },
        },
        {
          label: '通知频次：',
          prop: 'triggerFrequency',
          style: { width: '32%' },
          render: true,
        },
        {
          label: '通知时间：',
          prop: 'notificationAfterTriggering',
          style: { width: '32%' },
          render: true,
        },
        {
          label: '触发条件：',
          prop: 'triggerConditions',
          style: { width: '32%' },
          type: 'input',
        },
        {
          label: '是否启用：',
          prop: 'enable',
          type: 'radio',
          options: [
            { label: '是', value: true },
            { label: '否', value: false },
          ],
        },
        {
          label: '默认用户：',
          prop: 'defaultUser',
          slotTitle: '通知用户',
          style: { width: '100%' },
        },
        {
          label: '额外用户：',
          prop: 'additionalUser',
          style: { width: '100%' },
        },
        {
          label: '通知方式：',
          prop: 'notificationMethod',
          slotTitle: '通知方式',
        },
        {
          label: '通知模版：',
          prop: 'notificationTemplates',
          style: { width: '100%' },
          render: true,
        },
      ],
    }
  },
  computed: {
    id: function () {
      return this.$route.params && this.$route.params.id
    },
    notification: function () {
      let obj = {}
      notification_method_type.forEach(item => {
        obj[item.value] = item.label
      })
      return obj
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      detailNotice(this.id).then(result => {
        this.data = result
        this.loading = false
        this.getText()
      })
    },
    getText() {
      const { defaultUser, triggerConditions, additionalUser } = this.data
      const _du = defaultUser.map(i => i['value'] && i['name']).join(' , ')
      const _rc = triggerConditions.map(i => i['value'] && i['name']).join(' , ')
      const _adu = additionalUser.map(i => i['value'] && i['name']).join(' , ')
      const _enables = this.data.notificationTemplates.filter(i => {
        return i['enable']
      })
      this.data.triggerConditions = _rc
      this.data.defaultUser = _du
      this.data.additionalUser = _adu
      this.data.notificationMethod = _enables.map(i => this.notification[i.notificationMethodType]).join(' , ')
    },
    // 消息等级字典
    async dictMessageGrade() {
      const arr = await this.$store.dispatch('dicts/dictMessageGrade')
      const result = arr.map(item => {
        return { label: item.name, value: item.id }
      })
      return result
    },
    // 通知业务字典
    async dictMessageBusiness() {
      const arr = await this.$store.dispatch('dicts/dictMessageBusiness')
      const result = arr.map(item => {
        return { label: item.name, value: item.id }
      })
      return result
    },
  },
}
</script>

<style lang="scss" scoped>
.app-msg-detail {
  padding: 10px 25px;
  box-sizing: border-box;
}

::v-deep .detail-form {
  .el-form-item {
    padding: 0;
    margin: 0;
    margin-right: 15px;
    .el-form-item__label {
      margin-right: 0;
    }
  }
  .slot-title {
    padding: 0;
    margin: 30px 0 10px 0;
    font-size: 16px;
  }
}
.title {
  font-size: 18px;
  line-height: 50px;
  margin: 0;

  // color: $main-blue;
  .el-button {
    font-size: 20px;
    margin-right: 10px;
  }
  em {
    font-style: initial;
    margin-left: 10px;
  }
}
.msg-tamplates {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  // padding-left: 80px;
  margin-top: 20px;
  box-sizing: border-box;
}

.tpl-table {
  width: 48%;
  margin: 0 10px 20px 0px;
  border-collapse: collapse;
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  td {
    padding: 10px 20px;
    border-left: 1px solid #d8d8d8;
    border-top: 1px solid #d8d8d8;
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    font-style: normal;
    &.label {
      width: 100px;
      padding: 0;
      text-align: center;
      vertical-align: middle;
    }
    &.bg {
      background-color: #ededed;
    }
    &.cont {
      height: 120px;
      vertical-align: text-top;
    }
  }
}
</style>
